Skip to main content

Introduction to main page

When you log in to your Kodif account, you will see the left-side menu and the main page for flows.

On the left bar menu, there are:

  • Flows
  • Rules
  • Analytics
  • JS-Libraries
  • JS-Validations
  • Components

On the main page of the flow, you can create and search for a flow.

Also, you can access all the flows that were already created.

img_9.png

Creating a flow​

When you press "Add Flow" button, you will see a pop-up window.

Write the name of the flow and press "Create Flow".

Later you will see created flow in the list of flows.

img_3.png

The created flow has three buttons: Flow Builder, Details, and Archive buttons.

  • Flow builder is responsible for all manipulations of the nodes and versions, such as creating, cloning, saving, editing, etc.
  • Details are responsible for the flow itself, such as editing the name of the flow, activating versions, adding global styles, enabling language translation support, etc.
  • Archive is for deleting the flow.

img_10.png

1. Flow Builder

If it is a newly created flow, you will see a pop-up window that will ask for a name of the version.

Write any name (for.ex: v1) and press Create Version button.

img_4exp.png

Then the system will ask to input any node. Press any node, later you can add, delete, and update those nodes as needed.

img_5.png

There are six types of nodes: Decision, User Input, Action, Flow Pointer, Even Read, and Event Write.

More info about nodes you will find in this article

Flow builder looks like as following:

img_11.png


Let's go through each button
  1. Back button - to go back to list of the flows
  2. Name of the flow which is editable.
  3. Other tools [more information you will find in this article]()
  4. Demo view - to see overall functionality and view of the flow

    Press "demo view" button, and demo will be open in new window:

img_12.png


  1. Save version - to save the edited version.

If you have added new nodes and refreshed the page, your flow will not be saved. To save it, you should press the 'Save version' button.

  1. Selected version - shows list of versions
  2. Clone version button will show the following pop-up view:

img_13.png

Write version name (ex.: v2) and press "Clone Version". It will create the second version of the selected version. It is useful when you need to update some functionality without touching the original version.

If you tick "Is external?" checkbox, the system will automatically select your company ID and create a new flow in your account.

img_14.png

8. Horizontal Layout

If you create unaligned nodes and you don't like how it is structured, press "Horizontal view" and it will align your nodes properly.

video1

  1. Search Node

Type the name of the node you search for, and it will show that node with the purple color.

img_16.png

2. Details

The Details page looks like as below:

img_17.png

  1. Flow detail tab

img_18.png

  • Flow name - to edit name of the flow
  • Active version - you can activate or delete versions by selecting them from the dropdown.
  1. Zendesk details tab (add more info here)

img_19.png

  1. Fallback Details tab

  • img_20.png

  • Is this a fallback flow? - to define that the flow is fallback

  • Fallback Flow - from the dropdown choose a desired flow

  1. Initial Params tab

img_21.png

It is needed to get specific data from the API.

For example: let's say we have an API that searches orders by customer ID and order ID. So, to get orders from that customer and see the demo of the flow, you need to write initial parameters.

To add parameters press "+" button, and you will see the pop-up window as following:

img_22.png

When you add them, you will see the list of parameters.

img_23.png

You can edit, delete or add by pressing "brush", "trash", "+" buttons.

Later these parameters will appear when you want to see "demo" of the flow.

img_24.png

  1. Theme config tab

img_25.png

It is the global styling of the flow.

If you apply Font Family as Roboto, all text styles will be in Roboto font. However, if you want to change the font of a specific text, you can change it locally in the UI builder.

  • Header image (more info needed)
  • Primary color (more info needed)
  • Secondary color (more info needed)
  1. Locale tab

img_26.png

Local tab is used for adding language support. Your app, by default, can be in English and translated into any other language.

To add languages, search for the desired language, tick the checkbox and save. Later, if you don't need that language, you can delete it from the selected language list.

video2

3. Archive

When you press "Archive" button, a confirmation pop-up window will appear as following:

img_27.png

You can "Confirm" or "Cancel" deleting the flow.